<template>
  <div class="zomBieWrap">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <i @click='screenfullMap' class="iconfont icon-quanping2"></i>
      </div>
      <div class="colorWrap">
        <div class="checkWrap" style="text-align: center;">
          <el-radio-group v-model="enterpriseNo" size="mini" @change="changeRadio()">
            <div style="line-height: 35px;">
              <span class="colorlist">&nbsp;</span>
              <span class="companyList">
                <el-radio-button :label="null">全部</el-radio-button>
                </span>
              <span class="companyCount">{{totalCount}}</span>
            </div>

            <div v-for="(item,index) in companyList" :key="index" style="line-height: 35px;text-align: left;">
              <span class="colorlist" :style="'background-color:'+item.color"></span>
              <span class="companyList">
                <el-radio-button :label="item.enterpriseNo">{{item.enterpriseName}}</el-radio-button></span>
              <span class="companyCount">{{item.count}}</span>
            </div>
          </el-radio-group>
        </div>
      </div>
      <div id="mapzombie"></div>
    </div>
  </div>

</template>

<script>


  export default {
    props: [],
    data () {
      return {
        radio3: '',
        dataM: [{geometry: {type: 'Point', coordinates: [113.95662, 22.530658]}, count: 1}],
        roomMap: 11,
        map: {},
        splitMapList: {other: 'pink'},
        companyList: this.$store.state.companyInfos,
        companyColor: this.$store.state.companyInfos,
        isTrue: true,
        totalCount: 0,
        mapData: [],
        MapPage: 1,
        district: "",
        street: "",
        enterpriseNo: null,
      }
    },
    mounted(){
      this.getHotMap()
    },
    destroyed(){

    },
    created(){

    },
    components: {},
    methods: {
      //百度提取区域经纬度
      getBoundary(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //              Polyline  Polygon
          _this.ply = new BMap.Polyline(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.ply);  //添加覆盖物
          _this.map.setViewport(_this.ply.getPath());    //调整视野

        }
      },
      changeRadio(){
        this.mapData = []
        this.MapPage = 1
        this.map.clearOverlays();
        setTimeout(() => {
          this.getMapInfo()
        })
      },
      screenfullMap(){
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
      },
      //     获取数据
      getMapInfo(){
        let district=this.district==""?null:this.district
        let street=this.street==""?null:this.street
        let enterpriseNo=this.enterpriseNo==null?"":this.enterpriseNo
        if(this.MapPage==1){
          this.axios.post(process.env.API_HOST + '/vehicle/selectViolationVehicleCount', {
            enterpriseNo: enterpriseNo,
            district:district,
            street:street,
          })
            .then(response => {
              const result = response.data
              if (result.code ==200) {
                this.companyList=[]
                this.totalCount=0
                result.result.forEach(item=>{
                  this.totalCount+=item.count
                  this.$store.state.companyInfos.forEach(item1=>{
                    if(item.enterpriseNo==item1.enterpriseNo){
                      this.companyList.push({...item,color:item1.color})
                      this.splitMapList[item.enterpriseNo]=item1.color
                    }

                  })
                })
              }
            })
        }
        this.axios.post(process.env.API_HOST + '/vehicle/selectViolationVehicleGrid', {
          page: this.MapPage,
          enterpriseNo: enterpriseNo,
          rows: 5000,
          district:district,
          street:street,
        })
          .then(response => {
            const result = response.data
            if (result.code ==200) {
              let dataInfo = result.result
              if (enterpriseNo == dataInfo.enterpriseNo && district == dataInfo.district&&dataInfo.list.length>0) {
                this.MapPage++
                this.mapData[this.MapPage] = dataInfo.list
              }
            }
          })
      },
      getHotMap(){
        this.map = new BMap.Map("mapzombie", {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19,

        });    // 创建Map实例

//        this.map.centerAndZoom(new BMap.Point(114.14101345267,22.6485544122),11);  // 初始化地图,设置中心点坐标和地图级别
        this.map.centerAndZoom(new BMap.Point(113.7160491943,22.7508550059),12);  // 初始化地图,设置中心点坐标和地图级别
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
        this.map.enableScrollWheelZoom(); // 允许滚轮缩放
        this.map.setMapStyle({
          styleJson: [
            {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#ccd6d7ff"
              }
            }, {
              "featureType": "green",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#dee5e5ff"
              }
            }, {
              "featureType": "building",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "building",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#d1dbdbff"
              }
            }, {
              "featureType": "building",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#aab6b6ff"
              }
            },
            /*{
             "featureType": "poilabel",
             "elementType": "all",
             "stylers": {
             "visibility": "off"
             }
             },
             {
             "featureType": "manmade",
             "elementType": "all",
             "stylers": {
             "visibility": "off"
             }
             },
             {
             "featureType": "building",
             "elementType": "all",
             "stylers": {
             "visibility": "off"
             }
             }*/
          ]
        });
      },
      mapvSet(){
        var dataSet = new mapv.DataSet(this.mapData[this.MapPage]);
        var options = {
          splitList: this.splitMapList,
          size: 2,
          draw: 'category'
        }
        new mapv.baiduMapLayer(this.map, dataSet, options);

      }
    },
    watch: {
      MapPage(){
        this.getMapInfo()
        this.mapvSet()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../../common/stylus/mixin.styl"
  .zomBieWrap
    height 100%;
    position relative
    padding 10px
    background-color white
    border-radius 5px
    .containerWrap
      height: 100%;
      width: 100%;
      box-sizing border-box
      background-color white
      border-radius 5px
      position: relative;
      .infoButton
        width 20px
        height 20px
        font-size: 16px;
        color: #3975FE;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index 5
        opacity: 0;
        .iconfont
          color #3975FE
          display: inline-block;
          font-size: 20px;
          cursor pointer
      .colorWrap
        position: absolute;
        left 10px;
        top: 10px;
        background-color rgba(255, 255, 255, 0.7)
        line-height 20px
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        .checkWrap
          line-height 35px;
          .el-radio-button
            .el-radio-button__inner
              border-radius 10px
              padding 5px 15px
          .is-active
            .el-radio-button__inner
              background-color: #3975FE
              border-radius 10px
              border-color #3975FE
          .companyCount
            font-size: 14px;
            color: #3975FE;
            font-weight: bold;
            line-height: 28px;
            vertical-align: middle;
        .colorlist
          margin-top 12px
          margin-right 10px
          float left;
          display: inline-block;
          width: 10px;
          height 10px;
          border-radius: 50%;
        .companyList
          display: inline-block;
          width: 70px;
          text-align: left;
      #mapzombie
        height: 100%;
        width: 100%;
    &:hover .infoButton
      opacity: 1;
    .BMap_stdMpCtrl {
      left 10px !important
      top auto !important
      bottom: 10px !important;
    }
</style>
